<template>
	<!-- 主体内容区域 -->
	<div class="content">
		<!-- 头部区域 -->
		<div class="top">
			<h5 class="a">讲师</h5>
			<h5 class="l-12">/</h5>
			<h5 class="a">添加讲师</h5>
			<button @click="backlecturer()">返回</button>
		</div>
		<!-- 主要区域 -->
		<div class="main">
			<!-- 主要区域的头部标题 -->
			<h4 class="t-10">请填写讲师相关信息</h4>
			<ul class="list">
				<!-- 讲师区域 -->
				<li class="item">
					<span>讲师课程<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入讲师名称" v-model="person.lec_name">
				</li>
				<!-- 头像区域 -->
				<li class="item">
					<span>添加头像<font style="color: red;">*</font></span>
					<div class="add-box">
						<div class="add">
							<p class="title">+</p>
							<p>上传图片</p>
						</div>
						<div>只能上传jpg/png文件，且不超过500kb</div>
					</div>
				</li>
				<!-- 简介区域 -->
				<li class="item">
					<span>个人简介<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入全额" v-model="person.lec_brief">
				</li>
				<!-- 详细介绍区域 -->
				<li class="item">
					<span>详细介绍<font style="color: red;">*</font></span>
					<textarea placeholder="请输入内容" v-model="person.detail"></textarea >
				</li>
				<!-- 按钮区域 -->
				<li class="btn">
					<button class="add" @click="addTeacher()">立即添加</button>
					<button class="cancel" @click="backlecturer()">取消</button>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import {
	ref
} from 'vue'
import { addUserTeacher } from '../api/api.js'
export default {
	name: 'teacher',
	setup(){
		const person = ref({
			lec_name:'',
			lec_head: '',
			lec_brief: '',
			detail: '',
			add_tim: ''
		})
		return{
			person
		}
	},
	methods: {
		// 返回
		backlecturer() {
			this.$router.push('/lecturer')
		},
		// 添加
		addTeacher() {
			// 获取当前时
			let yy = new Date().getFullYear();
            let mm = new Date().getMonth()+1;
            let dd = new Date().getDate();
            let NowTime = yy+"."+mm+"."+dd
			this.person.add_tim = NowTime
			
			let _data = this.person
			console.log(_data)
			addUserTeacher(_data)
				.then(res => {
					console.log(res)
					this.$router.push('/lecturer')
				})
				.catch(err => {
					console.log(err)
				})
		}
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.content {
	width: calc(100% - 60px);
	background-color: #f0f0f0;
	padding: 35px 30px;
}

.top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 30px;
}

.top>a {
	min-width: 30px;
}

.l-12 {
	margin: 0 12px;
}

.main {
	width: calc(100% - 60px);
	height: 100vh;
	padding: 30px;
	background-color: #fff;
}

.t-10 {
	margin-bottom: 10px;
}

.list {
	width: 100%;
}

.item {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.list>li:nth-child(2) {
	height: 115px;
}

.list>li:nth-child(4) {
	height: 370px;
}

textarea {
	width: 1050px;
	height: 350px;
	padding: 10px 0 0 10px;
	font-size: 14px;
	resize: none;
	color: #7575a1;
}

.item>span {
	width: 78px;
	font-weight: bold;
	margin-right: 38px;
}

.item>input {
	width: 240px;
	height: 30px;
	outline: none;
	border: 1px solid #959595;
	padding: 0 10px;
	border-radius: 4px;
}

.add-box {
	width: 100%;
	height: 100%;
	margin-left: 8px;
}

.add-box>.add {
	width: 85px;
	height: 80px;
	background-color: #fafafa;
	border-radius: 2px;
	padding-top: 5px;
	margin-bottom: 7px;
}

.add>.title {
	text-align: center;
	font-size: 28px;
	color: #929292;
	margin: 10px 0 0 0;
}

.add>p {
	text-align: center;
}

.top>button {
	margin-left: 86%;
	width: 68px;
	height: 30px;
	text-align: center;
	border: none;
	background: #38a28a;
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
}

.btn {
	width: 220px;
	height: 48px;
	margin: 20px 0 0 116px;
}

.btn>button {
	text-align: center;
	line-height: 32px;
	height: 32px;
	outline: none;
	cursor: pointer;
	border-radius: 4px;
	color: #fff;
	border: none;
}

.btn>button:nth-child(1) {
	width: 78px;
	margin-right: 20px;
	background-color: #38a28a;
}

.btn>button:nth-child(2) {
	width: 60px;
	border: 1px solid #e9ebf0;
	color: #101010;
}
</style>
